<template>
    <div class="content">
        <el-row>
            <el-col :span="12">
                <el-button type="primary" :icon="CirclePlus" @click="onEdit(0,0)">添加</el-button>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-radio-group v-model="form.type" @change="onSelectType">
                    <el-radio-button label="工期风险" value="工期风险" />
                    <el-radio-button label="重难点" value="重难点" />
                </el-radio-group>
            </el-col>
        </el-row>
        <h1 class="text-center">{{form.type}}</h1>
        <el-table class="mt20" :data="tableData" v-loading="form.loading" style="width: 100%;font-size: 16px;">
            <el-table-column type="index" align="center" :index="indexMethod" />
            <el-table-column >
                <template #default="scope">
                    <el-descriptions :column="4" size="large" border >
                        <el-descriptions-item :label="form.type"><div >{{scope.row.title}}</div></el-descriptions-item>
                        <el-descriptions-item label="提交人"><div style="width: 80px;">{{scope.row.user.name}}</div></el-descriptions-item>
                        <el-descriptions-item label="日期" ><div style="width: 100px;">{{scope.row.user ? scope.row.created_at : '/'}}</div></el-descriptions-item>
                        <el-descriptions-item label="操作" >
                            <div style="width: 60px;">
                                <el-link type="primary" @click="onEdit(scope.row.id,1)">编辑</el-link>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="采取措施"><div >{{scope.row.measure}}</div></el-descriptions-item>
                        <el-descriptions-item label="提交人"><div style="width: 80px;">{{scope.row.person ? scope.row.person.name : ''}}</div></el-descriptions-item>
                        <el-descriptions-item label="日期" ><div style="width: 100px;">{{scope.row.person ? scope.row.updated_at : '/'}}</div></el-descriptions-item>
                        <el-descriptions-item label="操作" >
                            <div style="width: 60px;">
                                <el-link type="primary" @click="onEdit(scope.row.id,2)">编辑</el-link>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" width="240">
                <template #default="scope">
                    <component :is="applyButton" model = "Difficulty" source = "Difficulty" :price="0" :id = scope.row.id />
                    <component :is="applyRevoke" model = "Difficulty" source = "Difficulty" :id = scope.row.id />
                    <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-button type="danger" >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isEdit" title="" width="30%">
        <component :is="difficultyForm" :type = type :data = editId @onSave="onSave" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import difficultyForm from './difficultyForm.vue';
import { CirclePlus} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
import http from '../../../../util/request';
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',page:0,type:'工期风险',current:0,total:10,limit:20,loading:false,parentBorder:false})
const isEdit = ref<boolean>(false)
const editId = ref<number>(0)
const type = ref<number>(0)

const tableData = ref<any[]>([])

const onGetData = () => {
    form.value.loading = true
    http.post('/difficulty',form.value).then((response:any)=>{
        form.value.loading = false
        response.data.data.forEach((e:any) => {
            e.created_at = e.created_at.substr(0,10)
            e.updated_at = e.updated_at.substr(0,10)
        });
        tableData.value = response.data.data
    })
}

const onEdit = (index: number,t:number) => {
    editId.value = index
    type.value = t
    isEdit.value = true
}

const onDelete = (id: number) => {
    http.delete('/difficulty/'+id).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        onGetData();
    })
}

const onSelectType = (data: number) => {
    form.value.type = data
    onGetData()
}

onMounted(()=>{
    onGetData()
})

const onSave = () => {
    isEdit.value = false
    onGetData()
}
</script>

<style scoped>

</style>